import React, { Component, Fragment } from 'react';
import { connect } from 'dva';
import { Row, Col, Card } from 'antd';
import { ChartCard, yuan, Bar, Area, Pyramid, DualAxis, Gauge, Pie } from 'components/Charts';
import Trend from 'components/Trend';
import moment from 'moment';
import styles from './Analysis.less';

const Yuan = ({ children }) => (
  <span
    dangerouslySetInnerHTML={{ __html: yuan(children) }} /* eslint-disable-line react/no-danger */
  />
);

@connect(({ analysis, loading }) => ({
  analysis,
  todayNewUser: analysis.todayNewUser,
  todayNewPayUser: analysis.todayNewPayUser,
  todaySNUser: analysis.todaySNUser,
  todayActiUser: analysis.todayActiUser,
  todayOrders: analysis.todayOrders,
  todayRev: analysis.todayRev,
  loading: loading.models.analysis,
}))
export default class Analysis extends Component {
  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'analysis/getNewUserData',
      payload: { createTime: moment(Date.now()).format('YYYY-MM-DD') },
    });

    dispatch({
      type: 'analysis/getTodayNewPayUser',
      payload: { payTime: moment(Date.now()).format('YYYY-MM-DD') },
    });

    dispatch({
      type: 'analysis/getTodaySNUser',
      payload: { createTime: moment(Date.now()).format('YYYY-MM-DD') },
    });

    dispatch({
      type: 'analysis/getTodayActiUser',
      payload: {},
    });

    dispatch({
      type: 'analysis/getTodayOrders',
      payload: { payTime: moment(Date.now()).format('YYYY-MM-DD') },
    });

    dispatch({
      type: 'analysis/getTodayRev',
      payload: { payTime: moment(Date.now()).format('YYYY-MM-DD') },
    });

    dispatch({
      type: 'analysis/sevenDaysMember',
      payload: { startTime: moment().subtract('days', 6).format('YYYY-MM-DD'), endTime: moment(Date.now()).format('YYYY-MM-DD') },
    });

    dispatch({
      type: 'analysis/orderAndRevenue',
      payload: {
        startTime: moment().subtract('days', 6).format('YYYY-MM-DD'),
        endTime: moment(Date.now()).format('YYYY-MM-DD')
      },
    });

    dispatch({
      type: 'analysis/sevenDaysApp',
      payload: {
        startTime: moment().subtract('days', 6).format('YYYY-MM-DD'),
        endTime: moment(Date.now()).format('YYYY-MM-DD')
      },
    });

    dispatch({
      type: 'analysis/DAUAppRate',
      payload: {},
    });
  }

  componentWillUnmount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'chart/clear',
    });
  }

  render() {
    const {
      analysis,
      loading,
      todayNewUser,
      todayNewPayUser,
      todaySNUser,
      todayActiUser,
      todayOrders,
      todayRev,
    } = this.props;
    let { sevenDaysMember, orderAndRevenue, sevenDaysApp, DAUAppRate } = analysis;

    const topColResponsiveProps = {
      xs: 12,
      sm: 8,
      md: 8,
      lg: 6,
      xl: 4,
      xxl: 4,
      style: { marginBottom: 24 },
    };

    let convData = this.props.analysis.convData;
    const { DataView } = DataSet;
    const dv = new DataSet.View().source(convData);
    dv.transform({
      type: 'percent',
      field: 'pv',
      dimension: 'action',
      as: 'percent'
    });
    convData = dv.rows;
    const cols = {
      percent: {
        nice: false
      }
    }

    /* eslint-disable no-var,no-undef */
    const sevenDaysMemView = new DataSet.View().source(sevenDaysMember);
    sevenDaysMemView.transform({
      type: 'rename',
      map: {
        newUser: '注册会员',
        unionUser: '关联小程序',
        payUser: '付费会员',
      },
    });
    sevenDaysMemView.transform({
      type: 'fold',
      fields: ['注册会员', '关联小程序', '付费会员'],
      key: 'type',
      value: 'value',
    });

    /* eslint-disable no-var,no-undef */
    const sevenDaysAppView = new DataSet.View().source(sevenDaysApp);
    sevenDaysAppView.transform({
      type: 'rename',
      map: {
        education: '小萌早教',
        book: '小萌绘本',
        video: '萌萌乐视频',
      },
    });
    sevenDaysAppView.transform({
      type: 'fold',
      fields: ['小萌早教', '小萌绘本', '萌萌乐视频'],
      key: 'type',
      value: 'value',
    });

    const clickTop5Data = [
      {
        x: '国学',
        y: 4544,
      },
      {
        x: '英语',
        y: 3321,
      },
      {
        x: '逻辑',
        y: 3113,
      },
      {
        x: '美术',
        y: 2341,
      },
      {
        x: '音乐',
        y: 1231,
      },
    ];

    const playTop10Data = [
      {
        x: '三字经',
        y: 156000,
      },
      {
        x: '西游记',
        y: 136000,
      },
      {
        x: '白雪公主',
        y: 123000,
      },
      {
        x: '变形金刚',
        y: 106000,
      },
      {
        x: '唐诗三百首',
        y: 98000,
      },
      {
        x: '三国',
        y: 85000,
      },
      {
        x: '天龙八部',
        y: 78000,
      },
      {
        x: '倚天屠龙记',
        y: 70000,
      },
      {
        x: '雪山飞狐',
        y: 69000,
      },
      {
        x: '小猪佩奇',
        y: 56000,
      },
    ].reverse();

    return (
      <Fragment>
        <Row gutter={24}>
          <Col {...topColResponsiveProps}>
            <ChartCard
              bordered={false}
              title="今日新注册会员"
              total={
                <span
                  className={
                    Number(todayNewUser.ratios) > 10
                      ? styles.totalTextRed
                      : Number(todayNewUser.ratios) < -10
                        ? styles.totalTextGreen
                        : null
                  }
                >
                  {todayNewUser.today}
                </span>
              }
              contentHeight={46}
              loading={loading}
            >
              <Trend flag={todayNewUser.ratios < 0 ? 'down' : 'up'}>
                环比昨日
                <span className={styles.trendText}>
                  {todayNewUser.ratios && todayNewUser.ratios != 'null'
                    ? Number(todayNewUser.ratios).toFixed(1)
                    : 0}%{' '}
                </span>
              </Trend>
            </ChartCard>
          </Col>
          <Col {...topColResponsiveProps}>
            <ChartCard
              bordered={false}
              title="今日新付费会员"
              total={
                <span
                  className={
                    Number(todayNewPayUser.ratios) > 10
                      ? styles.totalTextRed
                      : Number(todayNewPayUser.ratios) < -10
                        ? styles.totalTextGreen
                        : null
                  }
                >
                  {todayNewPayUser.today}
                </span>
              }
              contentHeight={46}
              loading={loading}
            >
              <Trend flag={todayNewPayUser.ratios < 0 ? 'down' : 'up'}>
                环比昨日
                <span className={styles.trendText}>
                  {todayNewPayUser.ratios && todayNewPayUser.ratios != 'null'
                    ? Number(todayNewPayUser.ratios).toFixed(1)
                    : 0}%{' '}
                </span>
              </Trend>
            </ChartCard>
          </Col>
          <Col {...topColResponsiveProps}>
            <ChartCard
              bordered={false}
              title="今日SN激活数"
              total={
                <span
                  className={
                    Number(todaySNUser.ratios) > 10
                      ? styles.totalTextRed
                      : Number(todaySNUser.ratios) < -10
                        ? styles.totalTextGreen
                        : null
                  }
                >
                  {todaySNUser.today}
                </span>
              }
              contentHeight={46}
              loading={loading}
            >
              <Trend flag={todaySNUser.ratios < 0 ? 'down' : 'up'}>
                环比昨日
                <span className={styles.trendText}>
                  {todaySNUser.ratios && todaySNUser.ratios != 'null'
                    ? Number(todaySNUser.ratios).toFixed(1)
                    : 0}%{' '}
                </span>
              </Trend>
            </ChartCard>
          </Col>
          <Col {...topColResponsiveProps}>
            <ChartCard
              bordered={false}
              title="今日活跃会员"
              total={
                <span
                  className={
                    Number(todayActiUser.ratios) > 10
                      ? styles.totalTextRed
                      : Number(todayActiUser.ratios) < -10
                        ? styles.totalTextGreen
                        : null
                  }
                >
                  {todayActiUser.today}
                </span>
              }
              contentHeight={46}
              loading={loading}
            >
              <Trend flag={todayActiUser.ratios < 0 ? 'down' : 'up'}>
                环比昨日
                <span className={styles.trendText}>
                  {todayActiUser.ratios && todayActiUser.ratios != 'null'
                    ? Number(todayActiUser.ratios).toFixed(1)
                    : 0}%{' '}
                </span>
              </Trend>
            </ChartCard>
          </Col>
          <Col {...topColResponsiveProps}>
            <ChartCard
              bordered={false}
              title="今日支付订单"
              total={
                <span
                  className={
                    Number(todayOrders.ratios) > 10
                      ? styles.totalTextRed
                      : Number(todayOrders.ratios) < -10
                        ? styles.totalTextGreen
                        : null
                  }
                >
                  {todayOrders.today}
                </span>
              }
              contentHeight={46}
              loading={loading}
            >
              <Trend flag={todayOrders.ratios < 0 ? 'down' : 'up'}>
                环比昨日
                <span className={styles.trendText}>
                  {todayOrders.ratios && todayOrders.ratios != 'null'
                    ? Number(todayOrders.ratios).toFixed(1)
                    : 0}%{' '}
                </span>
              </Trend>
            </ChartCard>
          </Col>
          <Col {...topColResponsiveProps}>
            <ChartCard
              bordered={false}
              title="今日营收金额"
              total={
                <span
                  className={
                    Number(todayRev.ratios) > 10
                      ? styles.totalTextRed
                      : Number(todayRev.ratios) < -10
                        ? styles.totalTextGreen
                        : null
                  }
                >
                  {todayRev.today}
                </span>
              }
              contentHeight={46}
              loading={loading}
            >
              <Trend flag={todayRev.ratios < 0 ? 'down' : 'up'}>
                环比昨日
                <span className={styles.trendText}>
                  {todayRev.ratios && todayRev.ratios != 'null'
                    ? Number(todayRev.ratios).toFixed(1)
                    : 0}%{' '}
                </span>
              </Trend>
            </ChartCard>
          </Col>
        </Row>

        <Card
          loading={loading}
          bordered={false}
          title="7日会员新增趋势"
          bodyStyle={{ marginBottom: 24 }}
        >
          <div className={styles.chartCard}>
            <Row>
              <Col xl={18} lg={16} md={12} sm={24} xs={24}>
                <Area
                  height={295}
                  padding="auto"
                  position="date*value"
                  forceFit
                  data={sevenDaysMemView}
                />
              </Col>
              <Col xl={6} lg={8} md={12} sm={24} xs={24}>
                <div className={styles.pyramid}>
                  <Pyramid
                    height={150}
                    title="7日会员转化率"
                    padding="auto"
                    position="action*pv"
                    forceFit
                    data={convData}
                  />
                </div>
              </Col>
            </Row>
          </div>
        </Card>

        <Card
          loading={loading}
          bordered={false}
          title="7日订单笔数与营收额趋势"
          bodyStyle={{ marginBottom: 24 }}
        >
          <div className={styles.chartCard}>
            <Row>
              <Col xl={18} lg={14} md={14} sm={24} xs={24}>
                <DualAxis data={orderAndRevenue} height={280} padding="auto" forceFit />
              </Col>
              <Col xl={6} lg={10} md={10} sm={24} xs={24}>
                <h4 style={{ textAlign: 'center' }}>当日交易额占7日总量比</h4>
                <Gauge percent={this.props.analysis.todayPercent} height={130} />
              </Col>
            </Row>
          </div>
        </Card>
        <Card
          loading={loading}
          bordered={false}
          title="7日APP日活趋势"
          bodyStyle={{ marginBottom: 24 }}
        >
          <div className={styles.chartCard}>
            <Row>
              <Col xl={18} lg={14} md={14} sm={24} xs={24}>
                <div className={styles.salesArea}>
                  <Area
                    height={295}
                    padding="auto"
                    position="date*value"
                    forceFit
                    data={sevenDaysAppView}
                  />
                </div>
              </Col>
              <Col xl={6} lg={10} md={10} sm={24} xs={24}>
                <h4 style={{ textAlign: 'center' }}>当日DAU占7日总量比</h4>
                <Gauge percent={DAUAppRate} height={130} />
              </Col>
            </Row>
          </div>
        </Card>
        {/* <Row gutter={2}>
          <Col xl={6} lg={12} md={12} sm={24} xs={24}>
            <Card
              loading={loading}
              bordered={false}
              bodyStyle={{ marginBottom: 24, padding: '0 0 0 10px' }}
              className={styles.title_14}
              title="小萌早教频道7日点击排行榜top5"
            >
              <Pie hasLegend title="" subTitle="" data={clickTop5Data} height={160} />
            </Card>
          </Col>
          <Col xl={6} lg={12} md={12} sm={24} xs={24}>
            <Card
              loading={loading}
              bordered={false}
              bodyStyle={{ marginBottom: 24, padding: '0 0 0 10px' }}
              title="小萌绘本频道7日点击排行榜top5"
              className={styles.title_14}
            >
              <Pie hasLegend title="" subTitle="" data={clickTop5Data} height={160} />
            </Card>
          </Col>
          <Col xl={6} lg={12} md={12} sm={24} xs={24}>
            <Card
              loading={loading}
              bordered={false}
              bodyStyle={{ marginBottom: 24, padding: '0 0 0 10px' }}
              title="萌萌乐卡通7日点击排行榜top5"
              className={styles.title_14}
            >
              <Pie hasLegend title="" subTitle="" data={clickTop5Data} height={160} />
            </Card>
          </Col>
          <Col xl={6} lg={12} md={12} sm={24} xs={24}>
            <Card
              loading={loading}
              bordered={false}
              bodyStyle={{ marginBottom: 24, padding: '0 0 0 10px' }}
              title="萌萌乐儿歌7日频道点击排行榜top5"
              className={styles.title_14}
            >
              <Pie hasLegend title="" subTitle="" data={clickTop5Data} height={160} />
            </Card>
          </Col>
        </Row>
        <Row gutter={8}>
          <Col xl={8} lg={12} md={12} sm={24} xs={24}>
            <Card
              loading={loading}
              bordered={false}
              bodyStyle={{ marginBottom: 24, padding: '0 0 0 10px' }}
              title="小萌早教7日播放排行榜top10"
              className={styles.title_14}
            >
              <Bar
                data={playTop10Data}
                height={240}
                padding="auto"
                color="#1abb9c"
                xAxisVisible={false}
                tickLine={null}
                line={null}
                transpose
                forceFit
                label
              />
            </Card>
          </Col>
          <Col xl={8} lg={12} md={12} sm={24} xs={24}>
            <Card
              loading={loading}
              bordered={false}
              bodyStyle={{ marginBottom: 24, padding: '0 0 0 10px' }}
              title="小萌绘本7日播放排行榜top10"
              className={styles.title_14}
            >
              <Bar
                data={playTop10Data}
                height={240}
                padding="auto"
                color="#1abb9c"
                xAxisVisible={false}
                tickLine={null}
                line={null}
                transpose
                forceFit
                label
              />
            </Card>
          </Col>
          <Col xl={8} lg={12} md={12} sm={24} xs={24}>
            <Card
              loading={loading}
              bordered={false}
              bodyStyle={{ marginBottom: 24, padding: '0 0 0 10px' }}
              title="萌萌乐视频7日播放排行榜top10"
              className={styles.title_14}
            >
              <Bar
                data={playTop10Data}
                height={240}
                padding="auto"
                color="#1abb9c"
                xAxisVisible={false}
                tickLine={null}
                line={null}
                transpose
                forceFit
                label
              />
            </Card>
          </Col>
        </Row> */}
      </Fragment>
    );
  }
}
